import { Card, Input, Form, Radio, Button, message } from "antd";
import React, { useEffect } from "react";
import { getUserInfoByName, modifyUser } from "../../../../service/useredit";

function EditUser(props) {
  const [form] = Form.useForm();
  useEffect(() => {
    getUserInfoByName(props.history.location.search.slice(1))
      .then((res) => {
        if (res.status === "200") {
          const record = res.result[0];
          form.setFieldsValue({
            userName: record.userName,
            userPwd: record.userPwd,
            confirmPwd: record.userPwd,
            email: record.email,
            phone: record.phone,
            userRole: record.userRole,
          });
        } else {
          message.info("获取用户信息失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 2,
      },
    },
  };
  const onFinish = (values) => {
    console.log(values);
    modifyUser(values)
      .then((res) => {
        if (res.status === "200") {
          message.info(res.msg);
          setTimeout(() => {
            window.location.reload();
          }, 2000);
        } else {
          message.info("用户信息更新失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  const onFinishFailed = (values) => {
    console.log("用户信息提交失败" + values.userName);
  };

  return (
    <Card title="编辑用户信息">
      <Form
        name="addUserByManager"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 13 }}
        style={{ width: "50%" }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        form={form}
      >
        <Form.Item
          label="用户名"
          name="userName"
          rules={[
            {
              required: true,
              message: "请输入用户名",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="userPwd"
          label="密码"
          rules={[
            {
              required: true,
              message: "密码不得为空!",
            },
            {
              pattern: new RegExp(
                "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$"
              ),
              message: "密码为包含英文和数字的6-12位字符！",
            },
          ]}
          hasFeedback
        >
          {/* <Input.Password
            iconRender={(visible) =>
              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
            }
          /> */}
          <Input />
        </Form.Item>

        <Form.Item
          name="confirmPwd"
          label="确认密码"
          dependencies={["userPwd"]}
          hasFeedback
          rules={[
            {
              required: true,
              message: "请再次确认密码!",
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue("userPwd") === value) {
                  return Promise.resolve();
                }

                return Promise.reject(new Error("两次输入的密码不一致!"));
              },
            }),
          ]}
        >
          {/* <Input.Password
            iconRender={(visible) =>
              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
            }
          /> */}
          <Input />
        </Form.Item>
        <Form.Item
          name="email"
          label="E-mail"
          rules={[
            {
              type: "email",
              message: "请输入正确的邮箱地址!",
            },
            {
              required: true,
              message: "邮箱不得为空!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="phone"
          label="电话号码"
          rules={[
            {
              required: true,
              message: "请输入您的电话号码!",
            },
            {
              len: 11,
              message: "请输入正确的电话号码",
            },
          ]}
        >
          <Input
            style={{
              width: "100%",
            }}
          />
        </Form.Item>
        <Form.Item
          name="userRole"
          label="用户角色"
          rules={[
            {
              required: true,
              message: "请选择用户的角色",
            },
          ]}
        >
          <Radio.Group>
            <Radio.Button value="0">管理员</Radio.Button>
            <Radio.Button value="1">普通用户</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            确认更改
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default EditUser;
